<template>
    <div class="app-container">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="图片" name="first">
                <el-table v-loading="loadingImage" :data="imageMedias" border stripe>
                    <el-table-column width="50px" label="#">
                        <template slot-scope="scope" >
                            {{queryImage.size * (queryImage.page-1) + scope.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column label="图片名称" prop="name" align="center"></el-table-column>
                    <el-table-column label="图片ID" prop="media_id" align="center"></el-table-column>
                    <el-table-column label="图片链接" prop="url" align="center">
                        <template slot-scope="scope">
                            <a :href="scope.row.url" target="_blank" rel="noreferrer" class="media-link">{{scope.row.url}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="更新时间" align="center">
                        <template slot-scope="scope">
                            {{ timestampToTime(scope.row.update_time) }}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                            @size-change="handleImageSizeChange"
                            @current-change="handleImageCurrentChange"
                            :current-page="queryImage.page"
                            :page-sizes="[10, 20, 30, 50]"
                            :page-size="queryImage.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="imageTotal">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="图文" name="second">
                <el-table v-loading="loadingNews" :data="newsMedias" border stripe>
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <div v-if="props.row.content.news_item.length > 1">
                                <el-table :data="props.row.content.news_item" border stripe>
                                    <el-table-column width="50px" label="#" align="center">
                                        <template slot-scope="scope" >
                                            {{queryNews.size * (queryNews.page-1) + scope.$index + 1}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="图文标题" prop="title" align="center"></el-table-column>
                                    <el-table-column label="图文链接" align="center">
                                        <template slot-scope="scope">
                                            <a :href="scope.row.url" target="_blank" rel="noreferrer" class="media-link">{{scope.row.url}}</a><br/>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column width="50px" label="#">
                        <template slot-scope="scope" >
                            {{queryNews.size * (queryNews.page-1) + scope.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column label="图文标题" align="center">
                        <template slot-scope="scope" >
                            <div v-if="scope.row.content.news_item.length <= 1" v-for="item in scope.row.content.news_item">{{item.title}}</div>
                            <div v-if="scope.row.content.news_item.length > 1">......</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="图文ID" prop="media_id" align="center"></el-table-column>
                    <el-table-column label="图文链接" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.content.news_item.length <= 1" v-for="item in scope.row.content.news_item">
                                <a :href="item.url" target="_blank" rel="noreferrer" class="media-link">{{item.url}}</a><br/>
                            </div>
                            <div v-if="scope.row.content.news_item.length > 1">......</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="更新时间" align="center">
                        <template slot-scope="scope">
                            {{ timestampToTime(scope.row.update_time) }}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                            @size-change="handleNewsSizeChange"
                            @current-change="handleNewsCurrentChange"
                            :current-page="queryNews.page"
                            :page-sizes="[10, 20, 30, 50]"
                            :page-size="queryNews.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="newsTotal">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import { wechatMedias } from '@/api/wechat'
    export default {
      name: 'media',
      data() {
        return {
          loadingImage: true,
          loadingNews: true,
          imageTotal: 0,
          newsTotal: 0,
          activeName: 'first',
          queryImage: {
            type: 'image',
            size: 10,
            page: 1
          },
          queryNews: {
            type: 'news',
            size: 10,
            page: 1
          },
          imageMedias: [],
          newsMedias: []
        }
      },
      methods: {
        timestampToTime(timestamp) {
          const date = new Date(timestamp * 1000)
          const Y = date.getFullYear() + '-'
          const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
          const D = date.getDate() + ' '
          const h = date.getHours() + ':'
          const m = date.getMinutes() + ':'
          const s = date.getSeconds()
          return Y + M + D + h + m + s
        },
        handleImageSizeChange(size) {
          this.queryImage.size = size
          this.fetchImageList()
        },
        handleImageCurrentChange(page) {
          this.queryImage.page = page
          this.fetchImageList()
        },
        handleNewsSizeChange(size) {
          this.queryNews.size = size
          this.fetchNewsList()
        },
        handleNewsCurrentChange(page) {
          this.queryNews.page = page
          this.fetchNewsList()
        },
        // 获取图片素材列表
        fetchImageList(resetPage = false) {
          this.loadingImage = true
          if (resetPage) {
            this.queryImage.page = 1
          }
          wechatMedias(this.queryImage).then(res => {
            this.loadingImage = false
            this.imageMedias = res.images.item
            this.imageTotal = res.images.total
          })
        },
        // 获取图文素材列表
        fetchNewsList(resetPage = false) {
          this.loadingNews = true
          if (resetPage) {
            this.queryNews.page = 1
          }
          wechatMedias(this.queryNews).then(res => {
            this.loadingNews = false
            this.newsMedias = res.news.item
            this.newsTotal = res.news.total
          })
        }
      },
      created() {
        this.fetchImageList()
        this.fetchNewsList()
      }
    }
</script>

<style scoped>
    .media-link {
        color: blue;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
    }
</style>